<template>
  <view>
    <view class="popup" v-if="!isShowExchangeSuccess && !isShowExchangeError">
      <view class="popupContent">
        <view class="header">
          <view class="title">商品详情</view>
          <view class="close" @click="detailClose">
            <image src="@/static/images/huojia/detail/close-icon.png"></image>
          </view>
        </view>
        <view class="content">
          <view class="goodsInfo">
            <view class="goodsInfoLeft">
              <image :src="goodsInfo.img"></image>
            </view>
            <view class="goodsInfoRight">
              <view class="goodsInfoRightTop">{{ goodsInfo.goodName }}-{{ uqrcodeValue }}</view>
              <view class="goodsInfoRightBottom">
                <view class="info" @click="isShowExchangeSuccess=true">
                  <image src="@/static/images/huojia/detail/aqb-icon.png"></image>
                  <view>
                    <view class="num">{{ goodsInfo.goodNum || 0 }}</view>
                    <view class="text">剩余库存</view>
                  </view>
                </view>
                <view class="info" style="justify-content: flex-end" @click="isShowExchangeError=true">
                  <image src="@/static/images/huojia/detail/kc-icon.png"></image>
                  <view>
                    <view class="num price">{{ goodsInfo.consumePoints || 0 }}</view>
                    <view class="text">所需安全币</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="desc">包含该商品的货柜：丰西出勤室、职教科、张家口</view>
        </view>
        <view class="footer">
          <view class="dhlc">
            <view class="dhlcTitle">
              <image src="@/static/images/huojia/detail/dhlc-icon.png"></image>
              <view>兑换流程：</view>
            </view>
          </view>
          <view class="step">
            <view class="stepLeft">
              <uqrcode ref="uqrcode" v-if="uqrcodeValue" canvas-id="qrcode" :value="uqrcodeValue" size="110"
                sizeUnit="rpx"></uqrcode>
            </view>
            <view class="stepRight">
              <view class="stepItem" v-for="(item, index) in stepList" :key="index">
                <image :src="require('@/static/images/huojia/detail/step' + (index + 1) + '.png')"></image>
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="popupBtn" @click="detailClose">取消兑换 ( {{ timeCount }}s )</view>
    </view>

    <!-- 兑换成功 -->
    <goodsExchangeSuccess v-if="isShowExchangeSuccess" @close="goodsExchangeResult"></goodsExchangeSuccess>
    <!-- 兑换失败 -->
    <goodsExchangeError v-if="isShowExchangeError" @close="goodsExchangeResult"></goodsExchangeError>
  </view>
</template>

<script>
import goodsExchangeSuccess from "./goodsExchangeSuccess.vue";
import goodsExchangeError from "./goodsExchangeError.vue";
import { containerBuySuccess } from "@/common/api/huogui/huogui.js";
export default {
  components: {
    goodsExchangeSuccess,
    goodsExchangeError,
  },
  props: {
    goodsInfo: {
      type: Object,
      default: () => { },
    },
  },
  watch: {
    goodsInfo: {
      handler(newVal) {
        this.uqrcodeValue = JSON.stringify(`${newVal.id},${newVal.goodId},${newVal.goodName},${newVal.goodNum},${newVal.consumePoints}`);
        console.log(this.uqrcodeValue, " this.uqrcodeValue");
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      timeCount: 60,//60秒自动关闭
      uqrcodeValue: "",
      isShowExchangeSuccess: false, //兑换结果
      isShowExchangeError: false, //兑换结果
      stepList: [
        {
          name: "打开 【 企教通APP 】",
        },
        {
          name: "点击 【 我的 】",
        },
        {
          name: "点击右上角【 扫码图标 】",
        },
      ],
    };
  },
  mounted() {
    console.log(this.goodsInfo, "goodsInfo");
    // 打开商品详情60秒自动关闭
    let time = setInterval(() => {
      this.timeCount--;
      if (this.timeCount == 0) {
        clearInterval(time);
        this.detailClose();
      }
    }, 1000);
  },
  methods: {
    payClick() {
      console.log(this.uqrcodeValue, "this.uqrcodeValue");
      let arr = JSON.parse(this.uqrcodeValue);
      arr = arr.split(",")
      console.log(arr, "arr");
      let params = {
        id: arr[0], // 货柜ID
        goodId: arr[1], // 商品ID
        goodName: arr[2], // 商品名称
        // goodNum: 1 || arr[3], // 商品数量
        goodNum: 1, // 商品数量
        consumePoints: arr[4], // 所需安全币
      }
      console.log(params, 'params');
      containerBuySuccess(params).then(res => {
        console.log(res, "res");
        if (res && res.code == 200 && res.data) {
          this.isShowExchangeSuccess = true;
        } else {
          this.isShowExchangeError = true;
        }
      })
    },
    goodsExchangeResult() {
      this.isShowExchangeSuccess = false;
      this.isShowExchangeError = false;
      this.detailClose();
    },
    detailClose() {
      this.$emit("detailClose");
    },
  },
};
</script>

<style lang="scss" scoped>
.popup {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.7);

  .popupContent {
    width: 563rpx;
    background-color: #fff;
    border-radius: 45rpx;

    .header {
      padding: 11.25rpx 22.5rpx 26.25rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        font-weight: bold;
        font-size: 23rpx;
        color: #222229;
      }

      .close {
        width: 60rpx;
        height: 60rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    .content {
      width: 100%;
      padding: 0 22.5rpx;

      .goodsInfo {
        width: 100%;
        display: flex;

        .goodsInfoLeft {
          width: 178rpx;
          height: 178rpx;
          border-radius: 15rpx;
          margin-right: 18.75rpx;
          border-radius: 15rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 15rpx;
          }
        }

        .goodsInfoRight {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .goodsInfoRightTop {
            font-weight: 500;
            font-size: 23rpx;
            color: #222229;
            line-height: 30rpx;

            white-space: normal;
            word-break: break-all;
            word-wrap: break-word;
            line-break: anywhere;
          }

          .goodsInfoRightBottom {
            display: flex;
            align-items: flex-start;

            .info {
              flex: 1;
              display: flex;
              line-height: 1;

              >image {
                width: 60rpx;
                height: 45rpx;
                margin-right: 9.38rpx;
              }

              .num {
                font-weight: 900;
                font-size: 32rpx;
                color: #222229;

                white-space: normal;
                word-break: break-all;
                word-wrap: break-word;
                line-break: anywhere;
              }

              .price {
                color: #fa6400;
              }

              .text {
                font-size: 15rpx;
                color: #7a7b7f;
              }
            }
          }
        }
      }

      .desc {
        margin-top: 20rpx;
        margin-bottom: 14.06rpx;

        background: #f5f7fc;
        border-radius: 8rpx;
        padding: 19.96rpx 15rpx;

        font-size: 15rpx;
        color: #54587a;
      }
    }

    .footer {
      position: relative;
      border-radius: 0rpx 0rpx 45rpx 45rpx;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        width: 268rpx;
        height: 267rpx;
        background: #e3e3ff;
        opacity: 0.5;
        filter: blur(50px);
        border-radius: 0rpx 0rpx 0 45rpx;
      }

      &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        display: block;
        width: 241rpx;
        height: 147rpx;
        background: #feeeee;
        opacity: 0.5;
        filter: blur(50px);
        border-radius: 0rpx 0rpx 45rpx 0;
      }

      .dhlc {
        z-index: 1;

        .dhlcTitle {
          position: relative;
          height: 80.63rpx;
          margin-left: 15.96rpx;

          >image {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 80.63rpx;
            height: 100%;
          }

          view {
            position: absolute;
            top: 16.88rpx;
            left: 6.56rpx;
            width: 163rpx;
            height: 45rpx;

            background: #eeeefe;
            border-radius: 23rpx;
            text-align: right;
            font-weight: 500;
            font-size: 19rpx;
            color: #2d2cd0;
            line-height: 44rpx;
          }
        }
      }

      .step {
        z-index: 1;
        display: flex;
        padding: 3.75rpx 22.5rpx 49.69rpx;

        /* background: linear-gradient(270deg, #f2f2ff 0%, #fff7f7 100%); */
        /* opacity: 0.5; */
        .stepLeft {
          z-index: 1;

          width: 137rpx;
          height: 137rpx;
          padding: 13.13rpx;
          margin-right: 20.63rpx;
          background: #ffffff;
          border-radius: 8rpx;

          >image {
            width: 100%;
            height: 100%;
          }
        }

        .stepRight {
          z-index: 1;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .stepItem {
            display: flex;
            align-items: center;
            height: 36rpx;
            padding: 0 20.63rpx;
            background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(238, 238, 254, 0.8) 100%);
            border-radius: 94rpx;

            image {
              width: 30rpx;
              height: 30rpx;
              margin-right: 18.75rpx;
              align-self: flex-start;
            }

            text {
              font-size: 17rpx;
              color: #141b4f;
              line-height: 36rpx;
            }
          }
        }
      }
    }
  }

  .popupBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18rpx 42rpx;
    margin-top: 37.5rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 32rpx;
    border: 2rpx solid #9c9c9c;

    font-weight: bold;
    font-size: 19rpx;
    color: #ffffff;
  }
}
</style>
